<template>
	<view class="addAd">
		<navBar title="添加广告创意"></navBar>
		<view class="acvite">
			<view class="header flex_r_between" @click="$util.toUrl(`/pages/store/generalization/moreWork?choose_id=${choose_id}`)">
				<text class="text">你可选1个作品进行投放</text>
				<view class="forward flex_center">
					<view>查看全部</view>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>

			<scroll-view :scroll-x="true">
				<view class="acvite_banner flex_center">
					<view class="item" v-for="(item,index) in list" :key="index" @click="onChoose(item)"
						:id="choose_id == item.id ? 'select' : ''">
						<image :src="item.image" mode="aspectFill" class="image"></image>
						<image src="/static/public/select_s.png" class="select_image" v-if="choose_id == item.id">
						</image>
					</view>
				</view>
			</scroll-view>

			<!-- 请输入符合商品的广告词 -->
			<input type="text" v-model="info.profile" class="profile" placeholder="请输入符合商品的广告词"
				placeholder-class="input-placeholder" />

			<!-- 预览图 -->
			<view class="preview_image_content">
				<image class="preview_image" :src="$util.prefix('store/ad_preview.png')" mode="widthFix"></image>
			</view>

			<!-- 推广画像 -->
			<view class="set_info">

				<view class="title">投放画像</view>

				<view class="form flex_r_between">
					<view class="label">投放区域</view>
					<view class="forward flex_center" @click="show_pop_type = true">
						<view class="hidden">{{
							info.pop_type == 1 ? '店铺距离'
							: info.pop_type == 2 ? '我的距离'
							: info.pop_type == 3 ? '客服距离'
							: '其他区域'}}/{{info.distance == 0 ? '不限' : `${info.distance}km`}}</view>
						<image src="/static/public/my_right_arrow.png"></image>
					</view>
				</view>

				<view class="form flex_r_between">
					<view class="label">性别</view>
					<view class="forward flex_center" @click="show_sex = true">
						<view class="hidden">{{
							info.gender == 1 ? '男' : info.gender == 0 ? '女' : '不限'
						}}</view>
						<image src="/static/public/my_right_arrow.png"></image>
					</view>
				</view>

				<view class="form flex_r_between">
					<view class="label">年龄</view>
					<view class="forward flex_center" @click="age_pop = true">
						<view class="hidden">{{info.age || '请输入年龄范围'}}</view>
						<image src="/static/public/my_right_arrow.png"></image>
					</view>
				</view>

			</view>

			<u-popup :safeAreaInsetBottom="false" :show="show_pop_type" :round="16" mode="bottom" @close="show_pop_type = false">
				<view class="pop">
					<view class="title">投放区域</view>
					<view class="list flex_r_between" style="border-top: 2rpx solid #EEEEEE;"
						@click="info.pop_type = 1">
						<view>店铺距离</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.pop_type == 1"></u-icon>
						<text v-else></text>
					</view>
					<view class="list flex_r_between" @click="info.pop_type = 2">
						<view>我的距离</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.pop_type == 2"></u-icon>
						<text v-else></text>
					</view>
					<view class="list flex_r_between" @click="info.pop_type = 3">
						<view>客服距离</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.pop_type == 3"></u-icon>
						<text v-else></text>
					</view>
					<view class="list flex_r_between" @click="info.pop_type = 4">
						<view>其他区域</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.pop_type == 4"></u-icon>
						<text v-else></text>
					</view>

					<view class="pop_btn" @click="next">确定</view>
				</view>
			</u-popup>

			<u-popup :safeAreaInsetBottom="false" :show="show_pop_distance" :round="16" mode="bottom" @close="show_pop_distance = false">
				<view class="pop">
					<view class="title">投放区域</view>
					<view class="list flex_r_between" style="border-top: 2rpx solid #EEEEEE;"
						@click="info.distance = 5">
						<view>5km</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.distance == 5"></u-icon>
						<text v-else></text>
					</view>
					<view class="list flex_r_between" @click="info.distance = 10">
						<view>10km</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.distance == 10"></u-icon>
						<text v-else></text>
					</view>
					<view class="list flex_r_between" @click="info.distance = 20">
						<view>20km</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.distance == 20"></u-icon>
						<text v-else></text>
					</view>
					<view class="list flex_r_between" @click="info.distance = 50">
						<view>50以内</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.distance == 50"></u-icon>
						<text v-else></text>
					</view>
					<view class="list flex_r_between" @click="info.distance = 0">
						<view>不限</view>
						<u-icon name="checkbox-mark" size="16" color="#131313" v-if="info.distance == 0"></u-icon>
						<text v-else></text>
					</view>

					<view class="pop_btn" @click="show_pop_distance = false">确定</view>
				</view>
			</u-popup>

			<u-popup :safeAreaInsetBottom="false" :show="age_pop" :round="16" mode="bottom" @close="age_pop = false">
				<view class="pop">
					<view class="title">投放年龄</view>

					<view class="age flex_center">
						<input type="number" placeholder="请输入" v-model="min"
							placeholder-class="input-placeholder input_class" maxlength="2"
							@change="change($event,1)" />
						<view class="input_text">至</view>
						<input type="number" placeholder="请输入" v-model="max"
							placeholder-class="input-placeholder input_class" maxlength="2"
							@change="change($event,1)" />
					</view>

					<view class="pop_btn" @click="onAge">确定</view>

				</view>
			</u-popup>

			<u-picker :show="show_sex" :columns="sex" @cancel="show_sex = false" @confirm="onSex"></u-picker>

			<view class="submit_btn" @click="onSubmit">保存</view>

		</view>
	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				choose_id: 0,

				info: {
					profile: '',
					num: 1,
					id: 0,
					type: 6,
					gender: 2,
					age: '',
					// 商家消息推广固定传5=曝光点支付
					pay_type: 5,
					// 距离
					distance: 0,
					// 投放区域:1=店铺距离,2=我的距离,3=客服距离,4=其他区域
					pop_type: 1,
					active_ids: 0,
					unit_price: '',
					
					account:'',
				},

				// 展示投放区域
				show_pop_type: false,
				// 展示投放距离
				show_pop_distance: false,
				// 年级输入
				age_pop: false,
				min: '',
				max: '',

				show_sex: false,
				sex: [
					['女', '男', '不限']
				],

				page: 1,
				list: [],
				total: 0,
			}
		},
		methods: {
			onChoose(item){
				if(item.status == 2){
					this.choose_id = item.id;
				}else {
					this.$util.msg('该作品正在审核');
				}
			},
			next() {
				this.show_pop_type = false;
				this.show_pop_distance = true;
			},

			change(e, num) {
				const inputTypeNum = /[^\d]/g //数字
				switch (num) {
					case 1:
						this.$nextTick(() => {
							this.listData.integral = e.replace(inputTypeNum, '');
						})
						break;
				}
			},


			onAge() {
				var min = Number(this.min);
				var max = Number(this.max);

				if (min < max) {
					this.info.age = `${this.min}-${this.max}`;
				} else {
					this.info.age = `${this.max}-${this.min}`;
				}

				this.age_pop = false;
			},

			onSex(e) {
				this.info.gender = e.indexs[0];
				this.show_sex = false;
			},

			getAcviteList() {
				this.$get('/article/getSellGoodsArticle', {
					page: this.page
				}).then(res => {
					this.list.push(...res.data.data);
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].id == this.info.active_ids) {
							this.choose_id = list[i].id;
							return;
						}
					}
				})
			},

			onSubmit() {
				if(!this.choose_id){
					return this.$util.msg('请选择作品');
				}
				
				if (!this.info.age) {
					return this.$util.msg('请选择投放年龄');
				}

				if (!this.info.profile) {
					return this.$util.msg('请输入符合商品的广告词');
				}
				
				this.info.active_ids = this.choose_id;
				this.info.account = uni.getStorageSync('account') ? uni.getStorageSync('account') : '';
				this.$post('/popularize/savePopularize', this.info).then(res => {
					this.$util.msg('已开启推广');
					this.info.id = res.data.id
				});

			},


			getBalance() {
				this.$get('/popularize/getBalance').then(res => {
					this.info.unit_price = res.data.unit_price;
				})
			},
			
			onchoose(id){
				this.choose_id = id;
			},

		},

		onLoad(option) {
			if (option.data) {
				var data = JSON.parse(option.data);
				this.info.profile = data.profile;
				this.info.id = data.id;
				this.info.gender = data.gender;
				this.info.age = data.age;
				this.info.pay_type = data.pay_type;
				this.info.pop_type = data.pop_type;
				this.info.distance = data.distance;
				if(data.content && data.content.length){
					this.info.active_ids = data.content[0].id;
				}
				this.info.unit_price = data.unit_price;
			}
			this.getAcviteList();
			this.getBalance();
		}
	}
</script>

<style lang="less" scoped>
	.addAd {
		padding: 46rpx 32rpx;
		min-height: 100vh;
	}

	.acvite {

		.header {
			margin-bottom: 14rpx;

			.text {
				font-size: 28rpx;
				color: #999999;
			}

			.forward {
				view {
					font-size: 28rpx;
					color: #333333;
				}

			}
		}

		.acvite_banner {
			.item {
				width: 248rpx;
				height: 328rpx;
				border-radius: 16rpx;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 16rpx;
				position: relative;
				border: 4rpx solid transparent;

				.image {
					width: 248rpx;
					height: 328rpx;
					margin-right: 16rpx;
					background: #F3F3F3;
				}

				.select_image {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			#select {
				border: 4rpx solid #FD2A53;
			}

		}

		.profile {
			height: 100rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 0 32rpx;
			margin: 24rpx 0 20rpx;
		}

		.preview_image_content {
			.preview_image {
				width: 100%;
			}
		}

		.set_info {
			margin-top: 30rpx;

			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}

			.form {
				margin-top: 20rpx;
				height: 100rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				padding: 0 32rpx;

				.label {
					font-size: 28rpx;
					color: #131313;
				}

				.forward {
					flex: 1;

					view {
						flex: 1;
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						text-align: right;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 4rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
					}

					input {
						width: 160rpx;
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						text-align: center;
					}

				}

			}
		}

	}

	.pop {
		padding: 48rpx 32rpx 58rpx;

		.title {
			font-weight: 600;
			font-size: 40rpx;
			color: #131313;
			line-height: 56rpx;
			margin-bottom: 40rpx;
		}

		.list {
			padding: 0 32rpx;
			height: 96rpx;
			border-bottom: 2rpx solid #EEEEEE;

			view {
				font-size: 32rpx;
				color: #131313;
				line-height: 96rpx;
			}
		}

		.pop_btn {
			height: 96rpx;
			background: #131313;
			border-radius: 48rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin-top: 40rpx;
		}

		.age {
			input {
				width: 160rpx;
				height: 72rpx;
				background: #ECECF4;
				border-radius: 16rpx;
				text-align: center;
				font-size: 28rpx;
			}

			.input_class {
				font-size: 24rpx;
			}

			.input_text {
				font-size: 26rpx;
				color: #999;
				margin: 0 16rpx;
			}
		}

	}

	.submit_btn {
		margin-top: 60rpx;
		height: 96rpx;
		background: #FD2A53;
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}
</style>